<template>
	<view>
		<view class="box">
			<view class="menu_content_box">
				<view class="pl15 pr15">
					<view class="area_block_1">
						<view class="pt15 pb15 pl30 pr25 scaley_1">
							<view class="flex_box aic">
								<view class="w170 fs30 cor_000">头像</view>
								<view class="item tar">
									<image :src="userInfo.icon" class="img9 vt" @tap="uploadFile"></image> 						</view>
							</view>
						</view>
						<view class="pt15 pb15 pl30 pr25 scaley_1">
							<view class="flex_box aic">
								<view class="w170 fs30 cor_000">昵称</view>
								<view class="item tar"><input type="text" class="ipt_01" v-model="userInfo.name"
										placeholder-style="color:#717171;"></view>
								
							</view>
						</view>

						<view class="pt15 pb15 pl30 pr25 scaley_1">
							<view class="flex_box aic">
								<view class="w170 fs30 cor_000">职业</view>
								<view class="item">
									<view class="sel_area_sty">
										<picker class="" @change="bindPickerChange" :value="index" :range="roles"
											range-key="name">
											<text class="fs28" v-if="userInfo.roleId == 0">请选择</text>
											<text class="fs28" v-if="userInfo.roleId != 0">{{roles[index].name}}</text>
										</picker>
									</view>
								</view>
								<image src="/static/icon_arrow_4.png" class="ml20 img15"></image> 							</view>
						</view>

						<view class="pt15 pb15 pl30 pr25 scaley_1">
							<view class="flex_box aic">		
								<view class="w170 fs30 cor_000">联系方式</view>
								<view class="item tar"><input type="text" class="ipt_01" v-model="userInfo.phone"
										placeholder-style="color:#717171;"></view>
								
							</view>
						</view>

			
					<!-- 	<view class="pt15 pb15 pl30 pr25 scaley_1">
							<view class="flex_box aic">
								<view class="w170 fs30 cor_000">所在区域</view>
								<view class="item">
									<view class="sel_area_sty">
										<view class="" @click="getSSQData();">{{address}}</view>
										<u-select v-model="show" mode="mutil-column-auto" :list="cityTree" @confirm="confirm"></u-select>
									</view>
								</view>
								<image src="/static/icon_arrow_4.png" class="ml20 img15"></image> 							</view>
						</view>
						 -->
						<view class="pt15 pb15 pl30 pr25 scaley_1">
							<view class="flex_box aic">
								<view class="w170 fs30 cor_000">位置</view>
								<view class="item">
									<view class="sel_area_sty">
										<text>{{address}}</text>
										<u-button type="error" shape="square" size="mini" @click="getLatLng">定位</u-button>
									</view>
								</view>
								<!-- <image src="/static/icon_arrow_4.png" class="ml20 img15"></image> -->
							</view>
						</view>
						
					</view>
				</view>
			</view>
			<!-- 保存资料-按钮 -->
			<view class="consult_immediately_btn" @tap="uploadUserInfo">保存资料</view>
		</view><!-- box -->
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		getUserDetailApi,
		uploadUserInfoApi,
		getRolesApi,
		getCityTreeApi,
		uploadImgApi,
		getLocationApi
	} from '@/http/api.js';
	import {
		quitLogin
	} from '@/utils/util.js';
	export default {
		data() {
			return {
				show: false,
				array: ['请选择职业', '策划经理人', '二手车商'],
				index: 0,
				region: ['请选择所在省市区', '', ''],
				region_code: [0, 0, 0],
				multiArray: [
					['亚洲', '欧洲'],
					['中国', '日本'],
					['北京', '上海', '广州']
				],
				multiIndex: [0, 0, 0],
				userId: '',
				userInfo: {
					beMember: false,
					endDate: null,
					icon: "",
					id: "",
					memName: null,
					name: "",
					phone: "",
					roleId: 0,
					roleName: ''
				},
				roles: [],
				cityTree: [],
				sheng: [],
				shi: [],
				qu: [],
				cityArr: [],
				sheng_index: 0,
				cityId: 0,
				address: '点击定位按钮获取当前位置',
				latlngaddress: '获取当前位置',
				latitude: '',
				longitude: '',
				position: '点击定位按钮获取当前位置',
				backclick: 0
			}
		},
		onLoad() {
			let that = this;
			this.userId = uni.getStorageSync('userId');
			this.getUserDetail();
			this.getRoles();
			setTimeout(function(){
				that.getCityTree();
			},1500)
			
		},
		onBackPress(e){
			this.backclick = this.backclick + 1;
			console.log("监听返回按钮事件",e);
			if (this.userInfo.beCompleteInfo) {
				uni.switchTab({
					url: '/pages/personal_center/personal_center'
				})
			} else {
				if (this.backclick < 5) {
					toast('请完善您的信息');
					return true;
				} else {
					uni.removeStorageSync('token');
					uni.removeStorageSync('userId');
					uni.removeStorageSync('phone');
					uni.removeStorageSync('userInfo');
					uni.removeStorageSync('beCompleteInfo');
					uni.redirectTo({
						url: '/pages/Sign_in/Sign_in'
					})
				}
				
			}
		},
		methods: {
			getSSQData: function() {
			  this.show = true
			},
			confirm: function(e) {
				this.cityId = e[2].value;
				this.address = e[0].label + e[1].label + e[2].label;
			},
			bindPickerChange: function(e) { //选择职业
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
				for (let i in this.roles) {
					if (i == e.target.value) {
						this.userInfo.roleId = this.roles[i].id
					}
				}
			},
		
			getRoles() {
				showLoading('加载中');
				let that = this;
				getRolesApi({

				}).then(res => {
					let roles = {};
					roles.id = 0;
					roles.name = '请选择';
					that.roles.push(roles);
					for (let i in res.data) {
						that.roles.push( res.data[i]);
					}
					//that.roles = res.data;
					
				}).catch(err => {
					console.log(err)
				})
			},
			getCityTree() {
				let that = this;
				// getCityTreeApi({

				// }).then(res => {
				// 	this.cityTree = res.data;
				// 	for (let i in this.cityTree) {
				// 		if ((this.cityTree[i].value + '').substring(0, 2) == (this.userInfo.cityId + '').substring(0, 2)) {
				// 			console.log('aaaa，找到你了');
				// 			for (let j in this.cityTree[i].children) {
				// 				for (let k in this.cityTree[i].children[j].children) {
				// 					if (this.cityTree[i].children[j].children[k].value == this.userInfo.cityId) {
				// 						this.address = this.cityTree[i].label + this.cityTree[i].children[j].label + this.cityTree[i].children[j].children[k].label
				// 						break;
				// 					}
				// 				}
				// 			}
				// 		}
						
				// 	}
				// }).catch(err => {

				// })
			},
			getUserDetail() {
				let that = this;
				showLoading('加载中');
				getUserDetailApi({
					userId: this.userId
				}).then(res => {
					that.userInfo = res.data;
					if (!res.data.roleId) {
						that.userInfo.roleId = 0;
					}
					if (that.userInfo.roleId) {
						that.userInfo.roleName = '请选择';
					} else {
						for (let i in that.roles) {
							if (i == e.target.value) {
								that.userInfo.roleName = that.roles[i].name
							}
						}
					}
					that.index = parseInt(res.data.roleId);
					that.address= res.data.city;
					that.latitude = res.data.latitude;
					that.longitude = res.data.longitude;
					hideLoading();
				}).catch(err => {
					hideLoading();
				})
			},
			
			uploadFile(index) {
				let that = this;
				uni.chooseImage({
					count: 1,
				    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album','camera'], //从相册选择
				    success: function (res) {
						showLoading('上传中');
						uploadImgApi({
							file: res.tempFilePaths[0],
							id: 1
						}).then(result=>{
							that.userInfo.icon = result.data;
							hideLoading();
						}).catch(error=>{
							hideLoading();
						})
				    }
				});
			
			},

			uploadUserInfo() {
				for (let i in this.roles) {
					if (i == this.index) {
						this.userInfo.roleId = this.roles[i].id;
					}
				}
				let userId = this.userId;
				let name = this.userInfo.name ? this.userInfo.name : '';
				let phone = this.userInfo.phone;
				let roleId = this.userInfo.roleId;
				let icon = this.userInfo.icon;
				let cityId = this.cityId ? this.cityId + '' : this.userInfo.cityId + '';
				if (!this.longitude || !this.latitude) {
					toast('请先选择定位！');
					return false;
				}
				if (!cityId) {
					toast('未获得当前城市！');
					return false;
				}
				if (!name) {
					toast('昵称必须填写！');
					return false;
				}
				
				if (!(/^1[3456789]\d{9}$/.test(phone))) {
					toast('手机号不合法，请重新输入');
					return false;
				}	
				if (!roleId) {
					toast('请选择角色');
					return false;
				}
				if (!icon) {
					toast('请上传您的头像');
					return false;
				}
				showLoading('加载中');
				uploadUserInfoApi({
					id: userId,
					name: name,
					phone: phone,
					roleId: roleId,
					cityId: cityId,
					icon: icon,
					longitude: this.longitude,
					latitude: this.latitude,
					//address: this.address,
					city: this.address
				}).then(res => {
					toast('保存成功');
					setTimeout(function(){
						uni.navigateTo({
							url: '/pages/personal_center/personal_center'
						})	
					},500)
								
				}).catch(err => {
					toast('保存失败');
					hideLoading();
				})
			},
			
			//获取当前经纬度位置
			getLatLng() {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						that.longitude = res.longitude;
						that.latitude = res.latitude;
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						getLocationApi({
							longitude: res.longitude,
							latitude: res.latitude
						}).then(res => {
							that.cityId = res.data.cityId;
							that.address = res.data.city;
							hideLoading();
						}).catch(err => {
							hideLoading();
						})
			
					}
				});
				
			}
			

		}
	}
</script>

<style>
	.menu_content_box {
		position: relative;
		height: calc(100vh - 98rpx);
		background-color: #f6f6f6;
	}

	.consult_immediately_btn {
		display: block;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		background: linear-gradient(90deg, #f44f33, #e10d09);
	}

	.area_block_1 {
		background-color: #fff;
		border-radius: 20rpx;
	}

	.ipt_01 {
		display: inline-block;
		width: 100%;
		height: 64rpx;
		line-height: 64rpx;
		text-align: right;
		padding: 0;
		font-size: 28rpx;
		color: #717171;
		background-color: transparent;
		border: none;
		border-radius: 0;
		outline: none;
	}

	.sel_area_sty {
		display: inline-block;
		width: 100%;
		height: 64rpx;
		line-height: 64rpx;
		text-align: right;
		font-size: 28rpx;
		color: #717171;
		background: transparent;
	}
</style>
